<template>
  <div class="box_1">
    <div class="saixuan">
      <div class="div1">筛选查找</div>
      <div class="div2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="名字">
            <el-input
              v-model="formInline.username"
              placeholder="名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="人员状态">
            <el-select v-model="formInline.peoplestate" placeholder="人员状态">
              <el-option label="跟进中" value="跟进中"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
              <el-option label="全部" value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <div class="liebiao">
        <div class="lianbiao_1">数据列表</div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-edit"
            class="lianbiao_2"
            @click="dialogVisible = true"
            circle
            >添加</el-button
          >

          <el-dialog
            title="添加"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <!-- 11 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="名称" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="应聘工作" prop="job">
                <el-input v-model="ruleForm.job"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="信息来源" prop="msgorigin">
                <el-input v-model="ruleForm.msgorigin"></el-input>
              </el-form-item>

              <el-form-item label="面试反馈" prop="interview">
                <el-input v-model="ruleForm.interview"></el-input>
              </el-form-item>
              <el-form-item label="人员状态" prop="peoplestate">
                <el-select v-model="ruleForm.peoplestate" placeholder="请选择">
                  <el-option label="跟进中" value="跟进中"></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
            <!-- 22 -->
          </el-dialog>
        </div>
      </div>

      <template>
        <el-table :data="tableData" style="width: 100%" height="400px">
          <el-table-column label="序号" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应聘岗位" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.job }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.phone[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息来源" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.msgorigin }}</span>
            </template>
          </el-table-column>
          <el-table-column label="面试反馈" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.interview }}</span>
            </template>
          </el-table-column>

          <el-table-column label="人员状态" width="140">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.peoplestate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" @current-change="pagesize" :total="50">
      </el-pagination>
    </div>
  </div>
</template>
    
    
    
      
<script>
import { renCaiApi } from "../../api/talentssApi";
export default {
  data() {
    return {
      //添加
      dialogVisible: false,
      // 添加时的数据
      ruleForm: {
        username: "",
        job: "",
        msgorigin: "",
        interview: "",
        type: [],
        phone: "",
  
      },
      //添加的规则
      rules: {
        username: [
          { required: true, message: "请输入活动名称" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符" },
        ],
        job: [{ required: true, message: "请输入岗位" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
        msgorigin: [
          { required: true, message: "请输入信息来源" },
          { type: "string", message: "请输入文字  " },
        ],
        interview: [
          { required: true, message: "请输入面试反馈" },
          { type: "string", message: "请输入文字  " },
        ],
        peoplestate: [
          { required: true, message: "请选择人员状态", trigger: "blur" },
        ],
      },
      //筛选
      formInline: {
        username: "",
        peoplestate: "",
      },
      //获取的数据
      tableData: [],
      tableData2: [],
    };
  },
  //获取数据
  async mounted() {
    this.loadDate()
  },
  methods: {
    
    async loadDate(page=1){
        let res = await renCaiApi();
        this.tableData = res.data.userlist;
        this.tableData2 = res.data.userlist;
    },
    pagesize(page){
        this.loadDate(page)
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    //创建
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableData.unshift(this.ruleForm),
            (this.dialogVisible = false),
            (this.ruleForm = {});
        } else {
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 查询事件
    onSubmit() {
     
      this.tableData = this.tableData2;
       let arr
      if (this.formInline.username != "") {
         arr = this.tableData.filter(
          (item) => this.formInline.username == item.username
        );
     
        this.tableData = arr;
      }  
      if (this.formInline.peoplestate != "") { 
            arr = this.tableData.filter(
            (item) => this.formInline.peoplestate == item.peoplestate
          );
        this.tableData = arr;
        
      }
      
        


    },
  },
};
</script>

<style lang="scss" scoped>
.box_1 {
  margin: 20px;

  .saixuan {
    .div1 {
      padding: 0 40px;
      height: 51px;
      line-height: 51px;
      background-color: #f2f2f2;
      margin-top: 80px;
    }
    .div2 {
      height: 50px;
      display: flex;
      border: 1px solid #f2f2f2;
      padding: 10px 70px 0;
    }
  }
  .liebiao {
    padding: 0 40px;
    margin-top: 10px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    .lianbiao_1 {
      height: 50px;
      line-height: 50px;
    }

    .lianbiao_2 {
      margin-top: 5px;
    }
  }
  .fenye {
    margin: 10px;
  }
  .el-input {
    width: 110px;
    height: 40px;
  }
}
</style>